<template>
  <div >
    <el-card>
      <div>
        <el-button type="primary" :icon="Plus" @click="addspecifications">+ 添加规格</el-button>
        <div v-for="(item,index) in data.specificationList" :key="index">
          <div class="margin">
            <el-input v-model="item.title" placeholder="请输入规格名称" style="width: 550px;" clearable />
            <span @click="addspecificationvalue(item)" style="margin-left:20px;color: blue;">添加规格值</span>
            <CircleCloseFilled style="width: 1em; height: 1em;float: right;cursor: pointer;"
              @click="Deleteyourfucking(index)" />
          </div>
          <div style="display:flex;">
            <div v-for="(i,ind) in item.values" :key="i">
              <el-input v-model="item.values[ind]" placeholder="请输入规格值" style="width: 150px;" clearable />
              <CircleCloseFilled @click="Deletethespecification(item,ind)"
                style="width: 1em; height: 1em;cursor: pointer;position: relative;right: 10px;bottom: 10px;" />
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card>
      <div>
        <div>
          <el-button type="primary" :icon="RefreshRight" @click="refresh">刷新
          </el-button>
          <el-table :data="data.skuList" border :span-method="fuckyou" style="margin-top: 10px;">
            <el-table-column v-for="(item, index) in data.specificationList" :prop="'id_'+item.title"
              :label="item.title">
            </el-table-column>
            <el-table-column prop="price" label="销售价">
              <template #default="scope">
                <el-input v-model="scope.row.price" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { Plus, CircleCloseFilled, RefreshRight } from '@element-plus/icons-vue'

const skuLength = ref()   //行数
const data: DataType = reactive({
  specificationList: [],
  skuList: []
})
interface DataType {
  specificationList: specificationType[],
  skuList: []
}
interface specificationType {
  title: string,
  values: string[]
}
// 添加规格
function addspecifications() {
  data.specificationList.push({ title: "", values: [""] })
}
// 添加规格值
function addspecificationvalue(item: { values: string[] }) {
  item.values.push("")
}
// 删除规格
function Deleteyourfucking(index: number) {
  data.specificationList.splice(index, 1)
}
// 删除规格值
function Deletethespecification(item: { values: string[] }, ind: number) {
  item.values.splice(ind, 1)
}
// 刷新
const refresh = (() => {
  if (data.specificationList.length < 1) { //规格数组没有数据清空label数组和sku数组
    data.skuList = []
    return
  }
  //过滤掉values里面的数组
  const valueList = data.specificationList.filter((item) => item.values.length).map((item) => item.values);

  const names = data.specificationList.map((item) => item.title);
  // 使用笛卡尔积算法将数据进行交叉处理

  let arr = valueList.reduce(
    (total: string[][], curr: string[]) => {
      let temp: string[][] = [];
      total.forEach((item) => {
        curr.forEach(node => {
          temp.push(item.concat([node]));
        });
      });
      return temp;
    },
    [[]]
  );

  // 进行拼接数据
  let list = arr.map((item: any, ind: number) => {
    let obj: any = { title: [], specification: '', price: 0 }
    item.forEach((val: string, index: number) => {
      // 相当于是添加一个对象
      obj['id_' + names[index]] = val;
      obj.title.push(val)
      obj.specification = item.map((m: string, v: number) => {
        if (m[v]) return val + '_' + item[v]
      })
    });
    return obj;
  });

  skuLength.value = list.length;
  data.skuList.length = 0
  Object.assign(data.skuList, list)
})
interface SpanMethodProps {
  rowIndex: number
  columnIndex: number
}

function fuckyou({ rowIndex, columnIndex }: SpanMethodProps) {
  let specList = data.specificationList.filter((item) => item.values.length > 0)
  if (columnIndex < specList.length - 1) {
    let rowSpanNum = 1
    for (let i = columnIndex + 1; i < specList.length; i++) {
      rowSpanNum *= specList[i].values.length
    }
    if (rowIndex % rowSpanNum === 0) {
      return { rowspan: rowSpanNum, colspan: 1 }
    } else {
      return { rowspan: 0, colspan: 0 }
    }
  }
}
</script>
<style lang="less" scoped>
.el-input {
  margin-top: 20px;
}
</style>
